import React from 'react'
import { Mentions, Form, Button } from 'antd';
const { Option, getMentions } = Mentions;

export default Form.create({ name: 'KimMentions'+Date.now() })(
  class App extends React.Component {
    handleReset = e => {
      e.preventDefault();
      this.props.form.resetFields();
    };

    handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFields((errors, values) => {
        if (errors) { console.log('Errors in the form!!!'); return; }
        console.log('Submit!!!', values);
      });
    };

    checkMention = (rule, value, callback) => {
      const mentions = getMentions(value);
      if (mentions.length < 2) { callback(new Error('必须选择多个!')); } else { callback(); }
    };

    render() {
      const { form: { getFieldDecorator } } = this.props;

      return (
        <Form layout="horizontal">
          <Form.Item label="Top coders" labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
            {getFieldDecorator('coders', {
              rules: [{ validator: this.checkMention }],
            })(
              <Mentions rows="1">
                <Option value="afc163">afc163</Option>
                <Option value="zombieJ">zombieJ</Option>
                <Option value="yesmeck">yesmeck</Option>
              </Mentions>,
            )}
          </Form.Item>


          <Form.Item label="Bio" labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
            {getFieldDecorator('bio', {
              rules: [{ required: true }],
            })(
              <Mentions rows="3" placeholder="您可以在这里使用@引用用户">
                <Option value="afc163">afc163</Option>
                <Option value="zombieJ">zombieJ</Option>
                <Option value="yesmeck">yesmeck</Option>
              </Mentions>,
            )}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 14, offset: 2 }}>
            <Button type="primary" onClick={this.handleSubmit}> Submit </Button>
            <Button onClick={this.handleReset}>Reset</Button>
          </Form.Item>
        </Form>
      );
    }
  }
) 